Selectable
Description
Checking this property specifies if the element is selectable. If it is selectable, then once it is selected, the Selected class is added to the element.
Create an Item with a Selectable Class
In the UX Builder open the UX Controls page. In the 'Data Controls' menu click on [List] to add a list control to the component.
Highlight the list control. In the control's properties list locate the List Properties section and click the
button next to the
List properties property to open the List Builder.
On the Data Source pane in the Data Source Type menu select 'Static'
Click the
button next to the 'Static data' property to open the Static choices dialog.
Click the 'Sample data' button in the lower left and add the 'Name and addresses' data to the list. Click OK and OK.
Go to the List Layout pane and use the blue > arrow to move the four defined fields from the Available Fields list to the 'Columns in List' section. Click OK to close the List Builder.
On the UX Controls page, open the Other Controls menu. Click on [Form View] to add a form view control to the component.
Click on the 'Form properties' property to open the Form Builder.
On the Data Source pane select "List" as the Datasource type. Next to the 'List name'' property click the
button and select the
list control you defined, in this case list1.
Open the Items pane of the FormView control. Click the 'Add item' button and name the new item.
Name the item 'v1' and click OK.
Now add two additional items, v2 and v3.
Highlighting each item separately, check the 'Selectable' checkbox. Some additional properties will be displayed.
Also for each item: in the 'Selected class name' add a class named 'v_pressed'. This class will be defined on the CSS tab.
On the Form Layout pane click on the Freeform editor radio button option.
Define the html that will contain the items you defined. You can use the 'Define Items' button to add existing items and define their arguments and values. This HTML will work:
<div a5-item="v1" a5-value="1">{Firstname}'s purchase history.</div> <div a5-item="v2" a5-value="2">Other customers in the {City} area.</div> <div a5-item="v3" a5-value="3">Total Sales in {State}.</div>
In this example we have given each item some placeholders that reference fields in the list we defined. The placeholders use {} surrounding the field name. This way whenever a new row on the list is clicked on, the text in the item will update as well.Open the CSS pane. Define the 'Selected class name' that was defined earlier in the Items pane.
.v_pressed{color:red;}
Close the Form View Builder and try running the component in Live Preview. When you click on a row in the list control, you should see the Form View control appear. When you select one of the items defined in the Form View, the item should turn red as defined in the CSS tab. When you select a different item that item will turn red and the first item will return to its un-selected color.
